<template>
  <div class="cart-placeorders-container">
    <div class="left">
      <my-address
        :isOrder="true"
        @changeAddressId="changeAddressId"
      ></my-address>
      <div class="my-order">
        <div class="title">确认订单信息</div>
        <div v-for="item in cartList" :key="item.cartId" class="cart-item">
          <div class="sellername">
            <el-tag size="mini" type="warning">卖家</el-tag>
            {{ item.sellerName }}
          </div>
          <div class="cart-content">
            <el-image
              style="width: 120px; height: 120px"
              :src="item.productImage"
            />
            <div class="cart-good-name">
              {{ item.productName }}
              <div class="cart-good-description">
                <el-tag size="mini" type="info"
                  >&nbsp;{{ item.productDescription }}</el-tag
                >
              </div>
            </div>
            <div class="cart-good-price">
              ￥{{ item.productPrice }}
              <span style="font-size: 12px; color: #ff5000">近期降价</span>
            </div>
            <div class="cart-good-count">
              <el-input-number
                size="small"
                v-model="item.quantity"
                :min="1"
                @change="(value) => changeCount(value, item.cartId)"
              ></el-input-number>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="title">
        付款详情&nbsp;
        <span class="total-num"
          >共<b>{{ cartList.length }}</b
          >件商品</span
        >
      </div>
      <div class="detail-sum">
        <span>商品总价</span>
        <span class="sum-price">￥{{ totalAmount }}</span>
      </div>
      <div class="detail-sum">
        <span>共减</span>
        <span class="sum-price active">￥0</span>
      </div>
      <div class="pay-way">
        <el-radio v-model="alipay" label="alipay">
          <svg
            t="1753721520974"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4918"
            width="16"
            height="16"
          >
            <path
              d="M230.404 576.536c-12.087 9.728-25.043 23.93-28.805 41.984-5.12 24.666-1.069 55.541 22.728 79.761 28.828 29.362 72.637 37.398 91.56 38.779 51.4 3.717 106.184-21.772 147.477-50.844 16.184-11.42 43.899-34.349 70.39-69.721-59.37-30.653-133.477-64.557-212.703-61.24-40.47 1.692-69.454 10.084-90.647 21.281z m752.859 135.545C1009.463 650.574 1024 582.968 1024 512 1024 229.688 794.335 0 512 0 229.665 0 0 229.688 0 512c0 282.335 229.665 512 512 512 170.385 0 321.491-83.723 414.631-212.124-87.997-43.742-233.027-115.734-322.36-159.299-42.63 48.596-105.65 97.303-176.84 118.495-44.722 13.29-85.037 18.365-127.199 9.75-41.739-8.548-72.481-28.093-90.401-47.683-9.127-9.995-19.612-22.706-27.203-37.82a71.25 71.25 0 0 0 1.202 3.049s-4.363-7.524-7.702-19.5a85.994 85.994 0 0 1-3.34-18.143 93.517 93.517 0 0 1-0.2-13.045c-0.378-7.702-0.066-15.783 1.67-24.064 4.185-20.235 12.822-43.81 35.172-65.692 49.063-48.039 114.777-50.621 148.814-50.42 50.421 0.289 138.04 22.35 211.812 48.439 20.436-43.52 33.547-90.068 42.007-121.1H305.308v-33.168h157.518v-66.337H272.139v-33.169h190.687v-66.315c0-9.105 1.803-16.584 16.584-16.584h74.619v82.899h207.293v33.169H554.029v66.337h165.82s-16.65 92.828-68.719 184.32c115.557 41.272 278.128 104.849 332.133 126.086z"
              fill="#1296DB"
              p-id="4919"
            ></path>
          </svg>
          支付宝
        </el-radio>
      </div>

      <div class="footer">
        <div class="real-total">
          <span>实付款</span>
          <span class="sum-price">￥{{ totalAmount }}</span>
        </div>
        <div class="action">
          <el-button @click="gotoBack">返回</el-button>
          <el-button
            type="danger"
            style="background-color: #ff5000"
            @click="createOrders()"
            >提交订单</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MyAddress from "../personalCenter/MyAddress.vue";
export default {
  name: "PlaceOrders",
  components: { MyAddress },
  data() {
    return {
      addressId: "",
      cartList: [],
      currentCartId: "",
      alipay: "alipay",
      totalAmount: 0,
      payUrl: "",
    };
  },
  created() {
    this.load();
  },
  mounted: function () {
    // this.createOrders();
  },
  methods: {
    load() {
      this.$axios
        .get(`/cart/getUserCart/${this.$store.state.user.userId}`)
        .then((res) => {
          if (res.data.success) {
            this.cartList = res.data.data;
            this.cartList = this.cartList.filter((item) => item.selected);
            this.totalAmount = res.data.totalAmount;
          } else {
            this.$message.error(res.data.message);
          }
        });
    },

    changeAddressId(val) {
      this.addressId = val;
    },
    changeCount(value, cartId) {
      this.$axios
        .post("/cart/update", {
          cartId: cartId,
          quantity: value,
        })
        .then((res) => {
          if (res.data.success) {
            this.load();
          } else {
            this.$message.error(res.data.message);
          }
        });
    },
    gotoBack() {
      this.$router.push("/cart");
    },
    createOrders() {
      this.$axios
        .post("/orders", {
          userId: this.$store.state.user.userId,
          addressId: this.addressId,
        })
        .then(
          (res) => {
            console.log(res);
            if (res.data.success) {
              this.payUrl = res.data.paymentUrl;
              this.pay();
            } else {
              this.$message.error(res.data.message);
            }
          },
          (err) => {
            this.$message.error(err);
          }
        );
    },
    pay() {
      window.open("http://localhost:8086" + this.payUrl, "_self");
    },
  },
};
</script>

<style lang="scss">
.cart-placeorders-container {
  background-color: #f7f7f7;
  min-width: 1200px;
  min-height: 800px;
  display: flex;
  justify-content: center;
  padding: 20px 0;
  .left {
    width: 750px;
    .my-address {
      background-color: #fff;
      border-radius: 20px;
      margin-bottom: 20px;
      .el-radio__label {
        display: none;
      }
      .address-card {
        cursor: pointer;

        &.active {
          border: 1px solid #00caa8;
        }
      }
    }
    .my-order {
      width: 100%;
      background-color: #fff;
      border-radius: 20px;
      margin-bottom: 20px;
      padding: 20px;
      .title {
        font-size: 1.2em;
        font-weight: bold;
        text-align: left;
      }
      .cart-item {
        background-color: #fff;
        margin: 20px 0;
        //padding: 20px;
        border-radius: 20px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        border: 1px solid #e9e9e9;
        border-radius: 5px;
        .sellername {
          //margin-left: 30px;
          padding: 10px 0;
          margin-bottom: 10px;
          font-size: 16px;
          font-weight: 600;
          width: 100%;
          background-color: #f7f7f7;
          border-radius: 5px 5px 0 0;
        }
        .cart-content {
          display: flex;
          position: relative;
          padding-bottom: 15px;
          .el-image {
            border-radius: 10px;
            //padding: 0 10px;
            padding-left: 30px;
            img {
              border-radius: 10px;
            }
          }
          .el-checkbox {
            position: absolute;
            top: 50%;
          }
          .cart-good-name {
            width: 250px;
            font-weight: 600;
            padding: 0 10px;
            color: #3d4040;
            .cart-good-description {
              margin-top: 10px;
              font-size: 12px;
              color: #3e3e3e;
              font-weight: 400;
            }
          }
          .cart-good-count {
            width: 200px;
          }
          .cart-good-price {
            width: 160px;
            font-size: 20px;
            padding: 0 10px;
            font-weight: 600;
            color: #f56c6c;
          }
          .el-button {
            height: 20px;
            border: none;
          }
        }
      }
    }
  }
  .right {
    margin-left: 80px;
    width: 350px;
    background-color: #fff;
    border-radius: 20px;
    padding: 20px;
    height: 200px;
    .title {
      font-size: 1.2em;
      font-weight: bold;
      text-align: left;
      margin-bottom: 15px;
      .total-num {
        font-size: 14px;
        font-weight: 400;
      }
    }
    .detail-sum {
      display: flex;
      justify-content: space-between;
      line-height: 35px;
      .sum-price {
        font-size: 20px;
        font-weight: 600;
        &.active {
          color: #ff5000;
        }
      }
    }
    .pay-way {
      padding: 10px;
      border-radius: 10px;
      background-color: #f7f7f7;
      display: flex;
      .el-radio {
        font-weight: 800;
        .el-radio__label {
          color: #3e3f3f;
        }
      }
      svg {
        vertical-align: text-bottom;
      }
    }
    .footer {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      align-items: center;
      .sum-price {
        font-size: 24px;
        font-weight: 600;
        color: #ff5000;
      }
      .el-button {
        border-radius: 10px;
        font-weight: 600;
      }
    }
  }
}
</style>